<template>
  <div class="cate-container">
    <el-dialog title="预约类别" :visible.sync="showDialog" class="common-dialog" width="950px" @close="close" destroy-on-close>
      <el-form ref="form" :model="form" label-width="120px" size="small" :inline="true">
        <el-row>
          <el-form-item label="类别名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入类别名称"
              clearable
              style="width: 200px;"
              @keyup.enter.native="getCateList"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="form.status"
              placeholder="状态"
              clearable
            >
              <el-option key="A" label="启用" value="A"/>
              <el-option key="N" label="禁用" value="N"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getCateList">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" plain size="mini" @click="addCate">新增类别</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table ref="tables" v-loading="loading" :data="orderList">
        <el-table-column label="ID" prop="id" width="80"/>
        <el-table-column label="类别名称" prop="orderSn"/>
        <el-table-column label="创建时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span class="status-normal">{{ getName(statusList, scope.row.status) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.pageSize"
        @pagination="getCateList"
      />
    </el-dialog>
    <bookCateForm :showDialog="open" @closeDialog="closeDialog"></bookCateForm>
  </div>
</template>
<script>
import bookCateForm from "./bookCateForm";
import { saveBookCate, getBookCateList, updateBookCateStatus } from "@/api/book";
export default {
  name: "bookCate",
  components: {
    bookCateForm
  },
  props: {
    showDialog: {
      type:[Boolean],
      default:()=>false
    },
  },
  watch: {
    showDialog(value) {
      if (value) {
        this.getCateList();
      }
    }
  },
  data(){
    return {
      loading: false,
      open: false,
      total: 0,
      form: { page: 1, pageSize: 10 },
      orderList: []
    }
  },
  methods: {
    // 更新状态
    updateBookCateStatus(hangNo) {
      const app = this;
      const param = { hangNo: hangNo };
      updateBookCateStatus(param).then( response => {
        if (response) {
          app.$modal.msgSuccess("更新成功！");
          app.getCateList();
        }
      })
    },
    // 执行挂单
    doSubmit(hangNo) {
      const app = this;
      if (!app.cartList || app.cartList.length < 1) {
        app.$modal.alert("请先添加结算商品！");
        return false;
      }
      let cartIds = [];
      app.cartList.forEach(function(cart) {
        cartIds.push(cart.cartId);
      })
      const param = { hangNo: hangNo, userId: app.memberInfo ? app.memberInfo : '', cartIds: cartIds.join(',') };
      saveBookCate(param).then( response => {
        if (response) {
          app.$modal.msgSuccess("挂单成功！");
          app.getCateList();
        }
      })
    },
    // 获取分类列表
    getCateList() {
      const app = this;
      app.loading = true;
      getBookCateList(app.form).then( response => {
        if (response.data) {
          app.cateList = response.data;
        }
        app.loading = false;
      }).catch((e) => {
         app.loading = false;
         console.log(e);
      });
    },
    // 新增分类
    addCate() {
      this.open = true;
    },
    // 关闭对话框
    close() {
      this.$emit('closeDialog','cateDialog');
    },
    closeDialog() {
      this.open = false;
    }
  }
}
</script>


